<template>
  <div class="container">
    <!-- 导航栏 -->
    <van-sticky>
      <van-nav-bar title="设置"/>
    </van-sticky>

    <!-- 内容 -->
    <div class="content">
      <van-cell-group inset>
        <van-cell title="退出登录" is-link v-if="member.id" @click="onLogoutClick" />
      </van-cell-group>
      <van-empty description="暂无内容" />
    </div>

    <!--  底部导航栏 -->
    <van-tabbar route v-model="activeTabBarIndex" active-color="#7458b0" inactive-color="#616161">
      <van-tabbar-item icon="todo-list-o" replace to="/">预订</van-tabbar-item>
      <van-tabbar-item icon="orders-o" replace to="/order-list">订单</van-tabbar-item>
      <van-tabbar-item icon="setting-o" replace to="/settings">设置</van-tabbar-item>
      <van-tabbar-item icon="apps-o" replace to="/api-doc">文档</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTabBarIndex: 2,
      member: {
        id: 0,
        familyName: '',
        givenName: '',
        gender: 0
      },
    }
  },
  methods: {
    loadLoginMember() {
      let loginMemberString = localStorage.getItem('loginMember');
      if (loginMemberString) {
        this.member = JSON.parse(loginMemberString);
      }
    },
    onLogoutClick() {
      this.$dialog.confirm({
        title: '退出登录',
        message: '确定要退出登录吗？',
      }).then(() => {
        this.handleLogout();
      }).catch(() => {
      });
    },
    handleLogout() {
      let url = 'http://localhost:8080/api/member/logout';
      this.axios.post(url).then(response => {
        let jsonResult = response.data;
        if (jsonResult.state === 20000) {
          this.$toast.success('已经退出登录');
          localStorage.removeItem('loginMember', JSON.stringify(jsonResult.data));
          this.$router.push('/');
        } else {
          this.$toast(jsonResult.message);
        }
      }).catch(error => {
        console.error('请求出错：', error);
        alert('网络异常，请重试');
      });
    }
  },
  mounted() {
    this.loadLoginMember();
  }
}
</script>

<style scoped>
.container { max-width: 400px; height: 100vh; background-color: #f6f6f6; }
.van-tabbar { max-width: 400px; }

.content { margin-top: 20px; }
</style>